<template>
    <div class="dav">
        <van-tabs v-model:active="active" class="tabwrap" title-active-color="red" @click-tab="clickTab">
            <van-tab v-for="(tab, index) in sortList.categoryL1List" :key="index" :title="tab.name">
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { DataModel } from '../../api/sort'
import { getSortList } from '../../api/sort'
import { useRouter } from 'vue-router'
const Router = useRouter()
const active = ref(0);
onMounted(() => {
    getSortListHandler()
})
const sortList = ref<DataModel>({
    categoryL1List: [],
    categoryL2List: [],
    currentCategory: { id: '' },
    categoryGroupList: []
})
async function getSortListHandler() {
    try {
        let res = await getSortList()
        sortList.value = res.data
    } catch (error) {
        console.log(error)
    }
}
function clickTab(e: any) {
    sortList.value.categoryL1List.forEach(item => {
        if (item.name == e.title) {
            Router.replace({
                name: 'ProductList',
                query: {
                    id: item.id
                }
            })
        }
    })
    console.log(e)
}
</script>

<style scoped lang="less"></style>